<template>
  <div class="flex-grid">
    <div class="flex-main">
      <div class="todo">
        <p class="title">{{detail.due_time}}应还款(元)</p>
        <p class="money">￥{{detail.total_money}}</p>
        <p class="tips">请在还款日当天进行还款，逾期产生的费用将自行承担</p>
        <img class="overdue" :src="overdueImg" v-if="detail.overdue_days !== 0">
      </div>
      <div class="detail">
        <div class="info hairlines-bottom">
          <p class="money">￥{{detail.total_money}}<span>第<b>{{detail.next_repay_cycle}}</b>期</span></p>
          <p class="time">{{detail.loan_time}}借 | 共{{detail.cycle}}期</p>
        </div>
        <div class="explain">
          <p><span>还款本金</span><span class="right">￥{{detail.principal_cycle}}</span></p>
          <p><span>还款利息</span><span class="right">￥{{parseInt(detail.interest_normal) + parseInt(detail.interest_overdue)}}</span></p>
          <p><span>收款商户</span><span class="right">{{detail.name}}</span></p>
        </div>
        <div class="explain">
          <p><span>已还金额</span><span class="right">￥{{parseInt(detail.has_repay_money)}}</span></p>
          <p><span>待还金额</span><span class="right">￥{{parseInt(detail.total_money) - parseInt(detail.has_repay_money)}}</span></p>
        </div>
      </div>
    </div>    
    <footer>
      <input class="footer-fullW-bt" type="button" value="返回" @click="back">
    </footer>
  </div>
</template>
<script>
  // 逾期详情
  import overdue from './img/overdue.png'
  import $ from 'edom'

  export default {
    name: 'billDetail',
    data () {
      return {
        title: '我的丰期',
        id: '',
        time: '6月24日',
        overdueImg: overdue,
        isOverdue: true,
        detail: {
          due_time: null,
          total_money: null,
          overdue_days: 0,
          next_repay_cycle: null,
          cycle: null,
          loan_time: null,
          principal_cycle: null,
          interest_normal: null,
          interest_overdue: null,
          name: null
        }
      }
    },
    methods: {
      back () {
        this.$router.go(-1)
      },
      getDetail () {
        this.axios.post('/api/loanRepay/repayDetail', {
          user_id: this.$store.state.user_id,
          token: this.$store.state.token,
          user_loan_id: this.$route.params.id
        }).then((res) => {
          let data = res.data
          if (data.code !== 200) {
            $().Mnews('工程师喂猫去了', 2000)
            return
          }
          this.detail = data.desc
        })
      }
    },
    created () {
      this.setTitle(this.title)
      this.getDetail()
    }
  }
</script>
<style lang="scss" scoped>
  @function rem($px) {
    @return $px / 75 * 1rem;
  }
  .flex-main{
    .todo{
      position: relative;
      margin-bottom: rem(15);
      background: #fff;
      text-align: center;
      padding: rem(35) 0 rem(40);
      .title{
        margin-bottom: rem(15);
        font-size: rem(30);
        color: #141414;
      }
      .money{
        margin-bottom: rem(15);
        font-size: rem(68);
        color: #ff8131;
      }
      .tips{
        font-size: rem(26);
        color: #999;
      }
      .overdue{
        position: absolute;
        top: rem(-30);
        right: rem(-30);
        width: rem(140);
        height: rem(140);
      }
    }
    .detail{
      background: #fff;
      padding: 0 rem(24);
      .info{
        padding: rem(30) 0;
        font-size: rem(32);
        color: #333;
        .money{
          margin-bottom: rem(5);
          font-weight: 700;
          span{
            font-size: rem(28);
            float: right;
            color: #e2e2e2;
            i{
              font-size: rem(34);
            }
          }
        }
        .time{
          font-size: rem(28);
          color: #999;
        }
      }
      .explain{
        padding-bottom: rem(40);
        font-size: rem(28);
        color: #999;
        border-bottom: 1px solid #e6e6e6;
        .right{
          float: right;
        }
        p{
          margin-top: rem(20);
        }
      }
      .explain:last-child{
        border-bottom: none;
      }
    }
  }
  footer{
    height: rem(100);
  }
</style>
